<script setup>
import OrderProcessingSearchRegion from '@/pages/OrderProcessing/components/OrderProcessingSearchRegion.vue'
import { reactive, ref, watchEffect } from 'vue'
import OrderProcessingPaginationComponent from '@/pages/OrderProcessing/components/OrderProcessingPaginationComponent.vue'
import {
  closeOrder,
  confirmThePayment,
  confirmTheReceipt,
  confirmTheShipment,
  editOrderNote,
  queryExpressInfo,
  queryOrderDetail,
  queryOrderList,
  updateExpressInfo,
  updateOrderActualPrice,
} from '@/service/order.js'
import dayjs from 'dayjs'
import { displayLoading } from '@/utils/loading.js'
import { ArrowDown, Edit } from '@element-plus/icons-vue'
import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'
import OrderDetailDrawer from '@/pages/OrderProcessing/components/OrderDetailDrawer.vue'
const total = ref(0)
let searchParams = reactive({
  orderType: 0,
  paymentMethod: 0,
  timeRange: null,
  searchCondition: 0,
  searchValue: '',
  status: 0,
  currentPage: 1,
  pageSize: 15,
})

watchEffect(async () => {
  const queryParams = {}
  if (searchParams.orderType === 0) {
    queryParams.orderType = null
  }
  if (searchParams.orderType === 1) {
    queryParams.orderType = 0
  }
  if (searchParams.orderType === 2) {
    queryParams.orderType = 1
  }
  if (searchParams.paymentMethod === 0) {
    queryParams.paymentMethod = null
  }
  if (searchParams.paymentMethod === 1) {
    queryParams.paymentMethod = 0
  }
  if (searchParams.paymentMethod === 2) {
    queryParams.paymentMethod = 1
  }
  queryParams.beginTime = searchParams.timeRange ? dayjs(searchParams.timeRange[0]).format('YYYY-MM-DD') : null
  queryParams.endTime = searchParams.timeRange ? dayjs(searchParams.timeRange[1]).format('YYYY-MM-DD') : null
  queryParams.searchCondition = searchParams.searchCondition === 0 ? null : searchParams.searchCondition - 1
  queryParams.searchValue = searchParams.searchValue
  queryParams.currentPage = searchParams.currentPage
  queryParams.pageSize = searchParams.pageSize
  queryParams.status = searchParams.status === 0 ? null : searchParams.status - 1
  const res = await displayLoading(() => queryOrderList(queryParams))
  orderList.value = res.data.records
  total.value = res.data.total
})

/**
 * 整体加载数据
 * @returns {Promise<void>}
 */
async function loadData() {
  const queryParams = {}
  if (searchParams.orderType === 0) {
    queryParams.orderType = null
  }
  if (searchParams.orderType === 1) {
    queryParams.orderType = 0
  }
  if (searchParams.orderType === 2) {
    queryParams.orderType = 1
  }
  if (searchParams.paymentMethod === 0) {
    queryParams.paymentMethod = null
  }
  if (searchParams.paymentMethod === 1) {
    queryParams.paymentMethod = 0
  }
  if (searchParams.paymentMethod === 2) {
    queryParams.paymentMethod = 1
  }
  queryParams.beginTime = searchParams.timeRange ? dayjs(searchParams.timeRange[0]).format('YYYY-MM-DD') : null
  queryParams.endTime = searchParams.timeRange ? dayjs(searchParams.timeRange[1]).format('YYYY-MM-DD') : null
  queryParams.searchCondition = searchParams.searchCondition === 0 ? null : searchParams.searchCondition - 1
  queryParams.searchValue = searchParams.searchValue
  queryParams.currentPage = searchParams.currentPage
  queryParams.pageSize = searchParams.pageSize
  queryParams.status = searchParams.status === 0 ? null : searchParams.status - 1
  const res = await displayLoading(() => queryOrderList(queryParams))
  orderList.value = res.data.records
  total.value = res.data.total
}
const searchRegionRef = ref()
function handleSearchEvent() {
  searchParams.orderType = searchRegionRef.value.searchRegionForm.orderType
  searchParams.paymentMethod = searchRegionRef.value.searchRegionForm.paymentMethod
  searchParams.timeRange = searchRegionRef.value.searchRegionForm.timeRange
  searchParams.searchCondition = searchRegionRef.value.searchRegionForm.searchCondition
  searchParams.searchValue = searchRegionRef.value.searchRegionForm.searchValue
}
function handleRestEvent() {
  Object.assign(searchParams, {
    orderType: 0,
    paymentMethod: 0,
    timeRange: null,
    searchCondition: 0,
    searchValue: '',
    currentPage: 1,
    pageSize: 15,
  })
}
function handlePageSizeChangeEvent(event) {
  searchParams.pageSize = event
}
function handleCurrentPageChangeEvent(event) {
  searchParams.currentPage = event
}

const orderList = ref([])
// 订单备注相关代码
const editOrderNoteDialogVisible = ref(false)
const editForm = reactive({
  text: '',
  orderId: 0,
})
function editNote(row) {
  editForm.text = row.merchantNote || ''
  editForm.orderId = row.orderId
  editOrderNoteDialogVisible.value = true
}
async function saveMerchantNote() {
  await editOrderNote(editForm.orderId, editForm.text)
  orderList.value.forEach((item) => {
    if (item.orderId === editForm.orderId) {
      item.merchantNote = editForm.text
    }
  })
  ElNotification({
    title: '提示',
    message: '成功修改订单备注！',
    type: 'success',
  })
  editOrderNoteDialogVisible.value = false
}
// 未付款状态编辑商品价格’
const editPendingPaymentOrderForm = reactive({
  orderId: 0,
  orderNumber: -1,
  actualPayment: 0.0,
})
const editPendingPaymentOrderDialogVisible = ref(false)
async function editPendingPaymentOrder(row) {
  editPendingPaymentOrderForm.orderId = row.orderId
  editPendingPaymentOrderForm.actualPayment = row.actualPayment
  editPendingPaymentOrderForm.orderNumber = row.orderNumber
  editPendingPaymentOrderDialogVisible.value = true
}
async function updatePendingPaymentOrder() {
  await updateOrderActualPrice(editPendingPaymentOrderForm.orderId, editPendingPaymentOrderForm.actualPayment)
  orderList.value.forEach((item) => {
    if (item.orderId === editPendingPaymentOrderForm.orderId) {
      item.actualPayment = editPendingPaymentOrderForm.actualPayment
    }
  })
  ElNotification({
    title: '提示',
    message: '成功修改订单价格！',
    type: 'success',
  })
  editPendingPaymentOrderDialogVisible.value = false
}

/**
 * 点击关闭订单按钮
 * @param row
 */
function onTapCloseOrderButton(row) {
  ElMessageBox.confirm('确定关闭此订单吗', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await closeOrder(row.orderId)
      await loadData()
      ElMessage({
        type: 'success',
        message: '成功关闭订单',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消关闭订单',
      })
    })
}
const showOrderDetail = ref(false)
/**
 * 点击订单详情
 * @param row
 * @returns {Promise<void>}
 */
const orderDetailInfo = ref([])

async function onTapCheckOrderDetail(row) {
  // 请求OrderDetail信息
  const res = await displayLoading(() => queryOrderDetail(row.orderId))
  orderDetailInfo.value = res.data
  console.log(res)
  showOrderDetail.value = true
}
function onTapConfirmThePayment(row) {
  ElMessageBox.confirm('您确定将此订单由未支付状态改为已支付状态吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await confirmThePayment(row.orderId)
      await loadData()
      ElMessage({
        type: 'success',
        message: '成功修改订单状态为已支付！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消修改',
      })
    })
}

// 点击打印配货单
function onTapPrintThePickingList(row) {}

// 点击发货按钮
async function onTapShipButton(row) {
  const res = await displayLoading(() => queryOrderDetail(row.orderId))
  orderDetailInfo.value = res.data
  expressForm.orderId = row.orderId
  showShipmentDialog.value = true
}
const expressForm = reactive({
  orderNumber: '',
  orderId: 0,
  delivery_type: 0,
  tracking_number: null,
})

// 发货对话框
const showShipmentDialog = ref(false)
async function confirmShipment() {
  if (expressForm.delivery_type === 0 && !expressForm.tracking_number) {
    ElMessage.warning('当前选择为快递发货，请填写快递单号！')
  } else {
    await confirmTheShipment(expressForm.orderId, expressForm.delivery_type, expressForm.tracking_number)
    ElMessage.success('成功发货！')
    await loadData()
    showShipmentDialog.value = false
  }
}

const showExpressDialog = ref(false)
// 点击查看配送信息
async function onTapCheckExpressInfo(row) {
  const res = await queryExpressInfo(row.orderId)
  expressForm.orderId = row.orderId
  expressForm.delivery_type = res.data.deliveryType
  expressForm.orderNumber = res.data.orderNumber
  expressForm.tracking_number = res.data.trackingNumber
  showExpressDialog.value = true
}
async function onTapUpdateOrderExpressInfo() {
  if (expressForm.delivery_type === 0 && !expressForm.tracking_number) {
    ElMessage.warning('当前选择为快递发货，请填写快递单号！')
  } else {
    await updateExpressInfo(expressForm.orderId, expressForm.delivery_type, expressForm.tracking_number)
    ElMessage.success('成功修改配送信息！')
    showExpressDialog.value = false
  }
}

// 确认已收货
function onTapConfirmReceipt(row) {
  ElMessageBox.confirm('确定要将此订单改为已收货状态吗', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await confirmTheReceipt(row.orderId)
      await loadData()
      ElMessage({
        type: 'success',
        message: '成功修改订单状态',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
loadData()
</script>

<template>
  <div class="order-processing">
    <order-processing-search-region
      ref="searchRegionRef"
      @search-event="handleSearchEvent"
      @reset-event="handleRestEvent"
    />
    <el-tabs v-model="searchParams.status">
      <el-tab-pane :name="0" label="全部"></el-tab-pane>
      <el-tab-pane :name="1" label="待支付"></el-tab-pane>
      <el-tab-pane :name="2" label="待发货"></el-tab-pane>
      <el-tab-pane :name="3" label="待收货"></el-tab-pane>
      <el-tab-pane :name="4" label="已完成"></el-tab-pane>
      <el-tab-pane :name="5" label="已取消"></el-tab-pane>
    </el-tabs>
    <el-table :data="orderList" :header-cell-style="{ 'text-align': 'center' }" border>
      <el-table-column type="expand">
        <template #default="props">
          <div class="table-expand">
            <div class="table-expand-item">
              <div class="table-expand-item-key">订单总价：</div>
              <div class="table-expand-item-value">{{ props.row.totalOrderAmount }}</div>
            </div>
            <div class="table-expand-item">
              <div class="table-expand-item-key">下单时间：</div>
              <div class="table-expand-item-value">{{ props.row.createTime }}</div>
            </div>
            <div class="table-expand-item">
              <div class="table-expand-item-key">用户备注：</div>
              <div class="table-expand-item-value" style="max-width: 500px">
                {{ props.row.customerNote || '无' }}
              </div>
            </div>
            <div class="table-expand-item">
              <div class="table-expand-item-key">商家备注：</div>
              <div class="table-expand-item-value">
                {{ props.row.merchantNote || '无' }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="订单号/类型" width="200">
        <template #default="scope">
          <div class="order-number-and-order-type">
            <div class="order-number">{{ scope.row.orderNumber }}</div>
            <div v-if="scope.row.orderType === 0" class="order-type-normal">[普通订单]</div>
            <div v-if="scope.row.orderType === 1" class="order-type-seckill">[秒杀订单]</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="商品信息" width="250">
        <template #default="scope">
          <div class="order-info-list">
            <template v-for="item in scope.row.orderDetailVoList" :key="item.orderDetailId">
              <el-tooltip :show-after="300" content="Top Left prompts info" effect="dark" placement="right">
                <template #content>
                  <div class="product-tooltip">
                    <div class="product-tooltip-item">
                      <div class="product-tooltip-item-key">商品名称:</div>
                      <div class="product-tooltip-item-value">{{ item.productName }}</div>
                    </div>
                    <div class="product-tooltip-item">
                      <div class="product-tooltip-item-key">规格名称:</div>
                      <div class="product-tooltip-item-value">
                        {{ item.productSpecificationName }}
                      </div>
                    </div>
                    <div class="product-tooltip-item">
                      <div class="product-tooltip-item-key">支付价格:</div>
                      <div class="product-tooltip-item-value">
                        {{ item.price }}
                      </div>
                    </div>
                    <div class="product-tooltip-item">
                      <div class="product-tooltip-item-key">购买数量:</div>
                      <div class="product-tooltip-item-value">
                        {{ item.quantity }}
                      </div>
                    </div>
                  </div>
                </template>
                <div class="order-info-item">
                  <img :src="item.productSpecificationImage" alt="" style="width: 36px; height: 36px" />
                  <div class="order-info-item-product-name">
                    {{ item.productName }}
                  </div>
                </div>
              </el-tooltip>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户信息" min-width="130">
        <template #default="scope">
          <div class="receiver-info">
            <span>{{ scope.row.userPhoneNumber }}</span
            >|<span>{{ scope.row.userNickname }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="实际支付" width="100">
        <template #default="scope">
          <span style="font-size: 12px; color: #303133">{{ scope.row.actualPayment }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付方式" width="100">
        <template #default="scope">
          <span v-if="scope.row.paymentMethod === 0">微信支付</span>
          <span v-if="scope.row.paymentMethod === 1">余额支付</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单状态" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.orderStatus === 0" type="warning">待付款</el-tag>
          <el-tag v-if="scope.row.orderStatus === 1" type="info">待发货</el-tag>
          <el-tag v-if="scope.row.orderStatus === 2" type="primary">待收货</el-tag>
          <el-tag v-if="scope.row.orderStatus === 3" type="success">已完成</el-tag>
          <el-tag v-if="scope.row.orderStatus === 4" type="danger">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付时间" min-width="120">
        <template #default="scope">
          <span v-if="scope.row.paymentTime !== null">{{ scope.row.paymentTime }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" min-width="150">
        <template #default="scope">
          <div v-if="scope.row.orderStatus === 0" style="display: flex; align-items: center; justify-content: center">
            <el-button type="text" @click="editPendingPaymentOrder(scope.row)"> 编辑 </el-button>
            <span style="margin-left: 3px; margin-right: 3px">|</span>
            <el-button type="text" @click="editNote(scope.row)"> 备注 </el-button>
            <span style="margin-left: 3px; margin-right: 3px">|</span>
            <el-dropdown>
              <span
                class="el-dropdown-link"
                style="cursor: pointer; color: var(--el-color-primary); display: flex; align-items: center"
              >
                更多
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="onTapConfirmThePayment(scope.row)"> 确认付款 </el-dropdown-item>
                  <el-dropdown-item divided @click="onTapCheckOrderDetail(scope.row)"> 订单详情 </el-dropdown-item>
                  <el-dropdown-item divided @click="onTapCloseOrderButton(scope.row)"> 关闭订单 </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div v-if="scope.row.orderStatus === 1" style="display: flex; align-items: center; justify-content: center">
            <el-button type="text" @click="onTapShipButton(scope.row)"> 发货 </el-button>
            <span style="margin-left: 3px; margin-right: 3px">|</span>
            <el-button type="text" @click="editNote(scope.row)"> 备注 </el-button>
            <span style="margin-left: 3px; margin-right: 3px">|</span>
            <el-dropdown>
              <span
                class="el-dropdown-link"
                style="cursor: pointer; color: var(--el-color-primary); display: flex; align-items: center"
              >
                更多
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="onTapPrintThePickingList(scope.row)">配货单打印</el-dropdown-item>
                  <el-dropdown-item divided @click="onTapCheckOrderDetail(scope.row)">订单详情</el-dropdown-item>
                  <el-dropdown-item divided @click="onTapCloseOrderButton(scope.row)">关闭订单</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div v-if="scope.row.orderStatus === 2" style="display: flex; align-items: center; justify-content: center">
            <el-button type="text" @click="onTapCheckExpressInfo(scope.row)"> 配送信息 </el-button>
            <span style="margin-left: 3px; margin-right: 3px">|</span>
            <el-dropdown>
              <span
                class="el-dropdown-link"
                style="cursor: pointer; color: var(--el-color-primary); display: flex; align-items: center"
              >
                更多
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="onTapCheckOrderDetail(scope.row)">订单详情</el-dropdown-item>
                  <el-dropdown-item divided @click="onTapConfirmReceipt(scope.row)">确认已收货</el-dropdown-item>
                  <el-dropdown-item divided @click="onTapPrintThePickingList(scope.row)">配货单打印</el-dropdown-item>
                  <el-dropdown-item divided @click="onTapCloseOrderButton(scope.row)">关闭订单</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div v-if="scope.row.orderStatus === 3">
            <el-button :icon="Edit" text type="primary" @click="onTapCheckOrderDetail(scope.row)">订单详情</el-button>
          </div>
          <div v-if="scope.row.orderStatus === 4">
            <el-button :icon="Edit" text type="primary" @click="onTapCheckOrderDetail(scope.row)">订单详情</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <order-processing-pagination-component
      :total="total"
      @page-size-change-event="handlePageSizeChangeEvent"
      @current-page-change-event="handleCurrentPageChangeEvent"
    />
  </div>
  <el-dialog v-model="editOrderNoteDialogVisible" draggable title="订单备注" width="300">
    <el-input v-model="editForm.text" :rows="3" placeholder="请输入订单备注" type="textarea" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editOrderNoteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveMerchantNote"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="editPendingPaymentOrderDialogVisible" draggable title="修改订单" width="500">
    <el-form :model="editPendingPaymentOrderForm" label-position="right" label-width="auto">
      <el-form-item label="订单编号:">
        <el-input v-model="editPendingPaymentOrderForm.orderNumber" disabled></el-input>
      </el-form-item>
      <el-form-item label="实际支付金额:">
        <el-input v-model="editPendingPaymentOrderForm.actualPayment"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editPendingPaymentOrderDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updatePendingPaymentOrder"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
  <div>
    <el-drawer
      v-model="showOrderDetail"
      :show-close="false"
      :with-header="false"
      class="order-detail-drawer"
      direction="rtl"
      size="50%"
    >
      <order-detail-drawer :orderDetailInfo="orderDetailInfo" @close-event="showOrderDetail = false" />
    </el-drawer>
  </div>
  <el-dialog v-model="showShipmentDialog" draggable title="订单发货" width="80%">
    <el-divider content-position="left">
      <span style="font-size: 20px; font-weight: 500">收货信息</span>
    </el-divider>
    <el-descriptions style="width: 95%; margin: 0 auto">
      <el-descriptions-item label="收货人:">
        {{ orderDetailInfo.receiverName }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号:">
        {{ orderDetailInfo.receiverPhoneNumber }}
      </el-descriptions-item>
      <el-descriptions-item label="收货地址:">
        {{ orderDetailInfo.deliveryAddress }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">
      <span style="font-size: 20px; font-weight: 500">商品信息</span>
    </el-divider>
    <el-table :data="orderDetailInfo.orderDetailList" border max-height="350" style="width: 95%; margin: 0 auto">
      <el-table-column label="商品信息">
        <template #default="scope">
          <div class="order-item-brief-info">
            <img :src="scope.row.imageUrl" alt="" />
            <div class="product-name-and-specification-name">
              <div class="product-name">{{ scope.row.productName }}</div>
              <div class="specification-name">{{ scope.row.productSpecificationName }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="价格（元）" prop="orderDetailId">
        <template #default="scope">
          <span>￥{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="数量" prop="quantity" />
      <el-table-column align="center" label="小计（元）">
        <template #default="scope"> ￥{{ scope.row.quantity * scope.row.price }} </template>
      </el-table-column>
    </el-table>
    <el-divider content-position="left">
      <span style="font-size: 20px; font-weight: 500">快递配送</span>
    </el-divider>
    <div style="width: 95%; margin: 0 auto">
      <el-form :model="expressForm">
        <el-form-item label="配送方式：">
          <el-radio-group v-model="expressForm.delivery_type">
            <el-radio :value="0">快递配送</el-radio>
            <el-radio :value="1">自行配送</el-radio>
            <el-radio :value="2">用户自提</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="expressForm.delivery_type === 0" label="快递单号：">
          <el-input v-model="expressForm.tracking_number" clearable placeholder="请输入快递单号" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showShipmentDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmShipment"> 发货 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="showExpressDialog" draggable title="物流信息" width="400">
    <el-form :model="expressForm" label-position="right" label-width="auto">
      <el-form-item label="订单号:">
        <el-input v-model="expressForm.orderNumber" disabled></el-input>
      </el-form-item>
      <el-form-item label="配送方式:">
        <el-radio-group v-model="expressForm.delivery_type">
          <el-radio :value="0">快递配送</el-radio>
          <el-radio :value="1">自行配送</el-radio>
          <el-radio :value="2">用户自提</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="expressForm.delivery_type === 0" label="快递单号:">
        <el-input v-model="expressForm.tracking_number" placeholder="请输入快递单号"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showExpressDialog = false">取消</el-button>
        <el-button type="primary" @click="onTapUpdateOrderExpressInfo"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.order-processing {
  background: #fff;
  padding: 24px;
}

.order-number-and-order-type {
  .order-number {
    font-size: 12px;
    color: #303133;
  }
  .order-type-normal {
    font-size: 12px;
    color: #3491fa;
  }
  .order-type-seckill {
    font-size: 12px;
    color: #ff0000;
  }
}

.order-info-list {
  .order-info-item {
    display: flex;
    align-items: center;
    .order-info-item-product-name {
      font-size: 12px;
      /* 核心样式 */
      display: -webkit-box; /* 将元素作为弹性伸缩盒子模型显示 */
      -webkit-line-clamp: 2; /* 限制最多显示 2 行 */
      -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式为垂直排列 */
      overflow: hidden; /* 超出内容隐藏 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */

      /* 可选：添加一些内边距或宽度限制，确保效果正常 */
      width: 100%; /* 或固定宽度，如 200px */
      padding: 4px 0;
    }
  }
}

.receiver-info {
  font-size: 12px;
  color: #303133;
  display: flex;
  justify-content: center;
  align-items: center;
  span:nth-of-type(1) {
    margin-right: 4px;
  }
  span:nth-of-type(2) {
    margin-left: 4px;
  }
}

.table-expand {
  padding: 8px 0 8px 60px;
  font-size: 12px;
  display: flex;
  column-gap: 60px;
  .table-expand-item {
    display: flex;
    .table-expand-item-key {
    }
    .table-expand-item-value {
    }
  }
}

:deep(.el-drawer__body) {
  overflow: hidden !important;
  padding: 0 !important;
}

.product-tooltip {
  .product-tooltip-item {
    display: flex;
    .product-tooltip-item-item-key {
    }
    .product-tooltip-item-item-value {
    }
  }
}
:deep(.el-descriptions__cell) {
  padding-top: 10px;
  padding-bottom: 10px;
}
.product-tooltip-item-value {
  margin-left: 3px;
}

.order-item-brief-info {
  display: flex;
  img {
    width: 60px;
    height: 60px;
  }
  .product-name-and-specification-name {
    font-size: 14px;
    color: #666;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .product-name {
    }
    .specification-name {
    }
  }
}
</style>
